* ==============================

EVS UI Web Applications - Dark

============================== */

/* Fonts:

 EVS applications make use of the font Segoe UI. At this time there seems to be no way to import this exact font (including at least bold, italic and bolditalic) using the @font-face mechanism or to use a service such as Typekit (font is not included in the catalogue). Segoe UI is however part of Windows 8. We will use these fonts in order of preference: "Segoe UI", Frutiger, Verdana, Arial.

 Other options (you need a subscription plan however):

 TypeKit:   https://typekit.com/fonts/pt-sans

 Fontdeck:  http://fontdeck.com/typeface/ptsans */

/*

 * HTML5 Boilerplate

 *

 * What follows is the result of much research on cross-browser styling.

 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,

 * Kroc Camen, and the H5BP dev community and team.

 */

/* ==========================================================================

 Base styles: opinionated defaults

 ========================================================================== */

html, button, input, select, textarea {

	color: #222;
}

body {

	font-family: "Segoe UI", Frutiger, Verdana, Arial font-size : 1em;

	line-height: 1.4;
	background: rgb(30,30,30);
}

/*

 * Remove text-shadow in selection highlight: h5bp.com/i

 * These selection rule sets have to be separate.

 * Customize the background color to match your design.

 */

::-moz-selection {

	background: #b3d4fc;
	text-shadow: none;
}

::selection {

	background: #b3d4fc;
	text-shadow: none;
}

/*

 * A better looking default horizontal rule

 */

hr {

	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}

/*

 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440

 */

img {

	vertical-align: middle;
}

/*

 * Remove default fieldset styles.

 */

fieldset {

	border: 0;
	margin: 0;
	padding: 0;
}

/*

 * Allow only vertical resizing of textareas.

 */

textarea {

	resize: vertical;
}

/* ==========================================================================

 Chrome Frame prompt

 ========================================================================== */

.chromeframe {

	margin: 0.2em 0;
	background: #ccc;
	color: #000;
	padding: 0.2em 0;
}

/* ==========================================================================

 Author's custom styles

 ========================================================================== */

/* General */

body {

	font-family: 'Segoe UI', Verdana, Arial, Sans-serif;
	font-size: 12px;
	-o-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

ul {

	margin: 0;
	padding: 0;
}

/* Main blocks */

.wrap {

	width: 100%;
}

.wrap > header {

	height: 75px;
	/* Old browsers */

	background: rgb(75,75,75);
	/* FF3.6+ */

	background: -moz-linear-gradient(top, rgb(75,75,75) 0%, rgb(60,60,60) 100%);
	/* Chrome,Safari4+ */

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(75,75,75)), color-stop(100%,rgb(60,60,60)));
	/* Chrome10+,Safari5.1+ */

	background: -webkit-linear-gradient(top, rgb(75,75,75) 0%,rgb(60,60,60) 100%);
	/* Opera 11.10+ */

	background: -o-linear-gradient(top, rgb(75,75,75) 0%,rgb(60,60,60) 100%);
	/* IE10+ */

	background: -ms-linear-gradient(top, rgb(75,75,75) 0%,rgb(60,60,60) 100%);
	/* W3C */

	background: linear-gradient(to bottom, rgb(75,75,75) 0%,rgb(60,60,60) 100%);
	/* IE6-9 */

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b4b4b', endColorstr='#3c3c3c',GradientType=0 );
}

.wrap > header h1 {

	background: url(../img/logo-evs.png) 20px 20px no-repeat;
	background: url(../img/logo-evs-white.svg) 15px 15px no-repeat;
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	height: 65px;
	width: 170px; /* Firefox needs a value for the width */
	text-indent: -9999em;
}

/* Login */

body.login {

	background: rgb(100,100,100);
}

.login-box {

}

.password-recovery {

	float: left;
	position: relative;
	top: 3px;
}

.login .modal {

}

.modal-header {

	/* Old browsers */

	background: rgb(135,180,225);
	/* FF3.6+ */

	background: -moz-linear-gradient(top, rgb(135,180,225) 0%, rgb(90,140,185) 100%);
	/* Chrome,Safari4+ */

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(135,180,225)), color-stop(100%,rgb(90,140,185)));
	/* Chrome10+,Safari5.1+ */

	background: -webkit-linear-gradient(top, rgb(135,180,225) 0%,rgb(90,140,185) 100%);
	/* Opera 11.10+ */

	background: -o-linear-gradient(top, rgb(135,180,225) 0%,rgb(90,140,185) 100%);
	/* IE10+ */

	background: -ms-linear-gradient(top, rgb(135,180,225) 0%,rgb(90,140,185) 100%);
	/* W3C */

	background: linear-gradient(to bottom, rgb(135,180,225) 0%,rgb(90,140,185) 100%);
	/* IE6-9 */

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87b4e1', endColorstr='#3c5a96',GradientType=0 );
}

.modal-header h1 {

	font-size: 18px;
	color: rgb(255,255,255);
}

.btn-primary {

	background: rgb(135,180,225);
	background: -moz-linear-gradient(top, rgb(135,180,225) 0%, rgb(90,140,185) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(135,180,225)), color-stop(100%,rgb(90,140,185)));
	background: -webkit-linear-gradient(top, rgb(135,180,225) 0%,rgb(90,140,185) 100%);
	background: -o-linear-gradient(top, rgb(135,180,225) 0%,rgb(90,140,185) 100%);
	background: -ms-linear-gradient(top, rgb(135,180,225) 0%,rgb(90,140,185) 100%);
	background: linear-gradient(to bottom, rgb(135,180,225) 0%,rgb(90,140,185) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87b4e1', endColorstr='#3c5a96',GradientType=0 );
}

.btn-primary:hover {

	background: rgb(90,140,185);
	background: -moz-linear-gradient(top, rgb(90,140,185) 0%, rgb(135,180,225) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(90,140,185)), color-stop(100%,rgb(135,180,225)));
	background: -webkit-linear-gradient(top, rgb(90,140,185) 0%,rgb(135,180,225) 100%);
	background: -o-linear-gradient(top, rgb(90,140,185) 0%,rgb(135,180,225) 100%);
	background: -ms-linear-gradient(top, rgb(90,140,185) 0%,rgb(135,180,225) 100%);
	background: linear-gradient(to bottom, rgb(90,140,185) 0%,rgb(135,180,225) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c5a96', endColorstr='#87b4e1',GradientType=0 );
}

/* icons app-wide functionality */

nav.main .icon-2x, .refresh-controls .icon-2x {

	font-size: 150%;
}

nav.main ul, .refresh-controls {

	font-size: 100%;
	list-style: none;
	float: right;
	position: absolute;
	top: 2em;
	right: 2em;
}

nav.main ul {

	position: relative;
	top: 2.0em;
	right: 1em;
}

nav.main li, .refresh-controls li {

	float: left;
	margin-right: 1em;
}

.refresh-controls label, .refresh-controls li:first-child {

	float: left;
	margin-right: .5em;
}

.refresh-controls li:last-child {

	margin-right: .8em;
}

/* Optical alignment. Circle next to almost rectangular shape */

nav.main li.about, nav.main li.logout {

	position: relative;
	top: 2px;
}

nav.main li:first-child, .refresh-controls li:first-child {

	margin-right: 1.5em;
}

nav.main li:first-child, nav.main li:first-child i, nav.main li a {

	color: rgba(255,255,255,.6);
}

nav.main li:first-child i, .refresh-controls li:first-child i {

	position: relative;
	top: 1px;
}

nav.main li a:hover, .refresh-controls li a:hover {

	text-decoration: none;
}

nav.main li a:hover {

	color: rgba(255,255,255,1);
	text-shadow: 2px 2px 2px rgba(0,0,0,.1);
}

nav.main li a span, .refresh-controls li a span {

	float: left;
	visibility: hidden;
	width: 0;
	height: 0;
	text-indent: -9999em;
}

.refresh-controls input {

	margin-right: .4em;
	position: relative;
	top: -2px;
}

.refresh-controls

.icon-refresh {

	color: #333;
	font-size: 17px;
	cursor: default;
	cursor: pointer;
	position: relative;
	top: 1px;
	left: -1px;
}

.refresh-controls

.icon-refresh:hover {

	color: #666;
}

/* Font Awesome checkbox */

.input-checkbox-alt {

	opacity: 0;
	position: absolute;
	z-index: 5;
	left: -110px;
	width: 105%;
	height: 105%;
}

section.main {

	float: left;
	width: 78%;
	background: rgb(80,80,80);
	min-height: 768px;
	-o-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

aside {

	float: left;
	width: 22%;
	background: rgb(70,70,70);
	min-height: 768px;
	-o-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

/* navigation aside */

.secondary ul {

	list-style: none;
	display: block;
	margin: 0;
	padding: 0;
}

.secondary {

	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
}

.secondary li {

	display: block;
	margin: 2px;
	background: #666;
}

.secondary li.level1 {

	background: #49494a;
}

.secondary li.active li a {

	color: #ccc;
}

.secondary li.active li:hover a {

	color: #fff;
}

.secondary li li.active a {

	color: #fff;
}

.secondary li.active {

	background-color: #08c;
}

.secondary li ul li {

	border-top: 2px solid #333;
	border-bottom: 2px solid #333;
	margin: 0;
}

.secondary li ul li:first-child {

	border-bottom: 0;
}

.secondary li ul li:last-child {

	border-top: 0;
	border-bottom: 0;
}

.secondary .remove-top-border {/* Would be great if we could fix this without the need for a class. */

	border-top: 0;
}

.secondary li a, .secondary > ul > li.level1 span {

	padding: 0.8em 1.5em 0.8em 0.8em;
	display: block;
}

.secondary a, .secondary span {

	text-decoration: none;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0 5px;
	color: #ccc;
	-moz-transition: background .3s;
	-webkit-transition: background .3s;
	-o-transition: background .3s;
	transition: background .3s;
}

.secondary li.active a {

	color: #fff;
}

.secondary ul li a:hover {

	color: #fff;
	background: #61747d;
	-moz-box-shadow: inset 0 0 2px 3px rgba(0,0,0,.1);
	-webkit-box-shadow: inset 0 0 2px 3px rgba(0,0,0,.1);
	box-shadow: inset 0 0 2px 3px rgba(0,0,0,.1);
}

.secondary a.user {

	background-image: url(img/user.png);
}

/* Move first anchor to right to cater for image and override this for the nested list items */

.secondary li > a, .secondary > ul > li.level1 span {

	padding-left: 3em;
}

.secondary ul ul li a {

	padding-left: 4.8em;
}

.secondary ul ul li:hover a i {

	background: url();
}

.secondary ul ul ul li a {

	padding-left: 6.5em;
}

/* .secondary ul ul li a:before {

 position: relative;

 left: -1em;

 content: ">";

 color: inherit;

 color: rgba(255,255,255,0.2);

 } */

.secondary li.active a:hover {

	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	/*	cursor: text; */

}

/* Icons */

.icon-circle {

}

.secondary > ul > li.level1 > a > .icon, .secondary > ul > li.level1 > span > .icon {

	position: relative;
	left: -18px;
}

.secondary li li .icon-caret-right {

	font-size: 16px;
	color: #828282;
	position: relative;
	top: 1px;
	left: -6px;
	-moz-transition: color 1s;
	-webkit-transition: color 1s;
	-o-transition: color 1s;
	transition: color 1s;
}

.secondary li li:hover .icon-caret-right {

	color: #fff;
	position: relative;
	left: -8px;
}

.main > div {

	padding: 20px;
}

/* Tables */

/* Use the parent class to up specificity (to override bootstraps default styles) */

section.main table {

	border-collapse: collapse;
	border: 1px solid rgb(100,100,100);
	color: rgb(220,220,220);
}

section.main thead tr th {

	border-bottom: 1px solid rgb(220,220,220);
}

/* .table-striped tbody>tr:nth-child(odd)>td, .table-striped tbody>tr:nth-child(odd)>th {

 background: rgba(80,80,80,.8);

 } */

section.main table td {

	border-top: 0;
	border-right: 1px solid rgb(80,80,80);
}

section.main table th {

	border-right: 1px solid rgb(100,100,100);
}

section.main table tbody tr:hover td {

	border-right: 1px solid rgba(255,255,255,.1);
}

section.main table tbody > tr:nth-child(2n+1) > td, .table-striped tbody > tr:nth-child(2n+1) > th {

	background-color: transparent;
}

section.main table tbody > tr:nth-child(2n+1), .table-striped tbody > tr:nth-child(2n+1) {

	background: rgb(60,60,60);
}

section.main table tbody {

	background: rgb(50,50,50);
}

section.main table tbody tr td {

	border-bottom: 1px solid rgb(90,90,90);
}

section.main table tbody tr:odd {

	background: rgb(60,60,60);
}

section.main table tbody tr:hover {

	/* Old browsers */

	background: rgb(135,180,225);
	/* FF3.6+ */

	background: -moz-linear-gradient(top, rgb(135,180,225) 0%, rgb(90,140,185) 100%);
	/* Chrome,Safari4+ */

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(135,180,225)), color-stop(100%,rgb(90,140,185)));
	/* Chrome10+,Safari5.1+ */

	background: -webkit-linear-gradient(top, rgb(135,180,225) 0%,rgb(90,140,185) 100%);
	/* Opera 11.10+ */

	background: -o-linear-gradient(top, rgb(135,180,225) 0%,rgb(90,140,185) 100%);
	/* IE10+ */

	background: -ms-linear-gradient(top, rgb(135,180,225) 0%,rgb(90,140,185) 100%);
	/* W3C */

	background: linear-gradient(to bottom, rgb(135,180,225) 0%,rgb(90,140,185) 100%);
	/* IE6-9 */

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87b4e1', endColorstr='#3c5a96',GradientType=0 );
	cursor: pointer;
	/* Older browsers can do without this subtle readability enhancement */

	text-shadow: 1px 1px 2px rgba(0,0,0,.4);
}

section.main .table-striped tbody tr:last-child td {

	border-bottom: 1px solid rgb(100,100,100);
}

section.main table thead th:hover {

	/* Old browsers */

	background: rgb(135,180,225);
	/* FF3.6+ */

	background: -moz-linear-gradient(top, rgb(135,180,225) 0%, rgb(90,140,185) 100%);
	/* Chrome,Safari4+ */

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(135,180,225)), color-stop(100%,rgb(90,140,185)));
	/* Chrome10+,Safari5.1+ */

	background: -webkit-linear-gradient(top, rgb(135,180,225) 0%,rgb(90,140,185) 100%);
	/* Opera 11.10+ */

	background: -o-linear-gradient(top, rgb(135,180,225) 0%,rgb(90,140,185) 100%);
	/* IE10+ */

	background: -ms-linear-gradient(top, rgb(135,180,225) 0%,rgb(90,140,185) 100%);
	/* W3C */

	background: linear-gradient(to bottom, rgb(135,180,225) 0%,rgb(90,140,185) 100%);
	/* IE6-9 */

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87b4e1', endColorstr='#3c5a96',GradientType=0 );
	cursor: pointer;
	/* Older browsers can do without this subtle readability enhancement */

	text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}

/* Set the width of individual columns like this: */

section.main

/* Form elements */

button {

}

button:hover {

}

button:active {

}

@media (min-width: 1200px) {
}

@media (min-width: 768px) and (max-width: 979px) {

	body {

		font-size: 60%;
	}

	/* main blocks */

	section.main {

		width: 76%;
	}

	aside {

		width: 24%;
	}

	nav.main ul, .refresh-controls {

		font-size: 125%;
	}

}

@media (max-width: 767px) {

	body {

		font-size: 50%;
	}

	/* main blocks */

	.wrap > header h1 {

		background: url(../img/logo-evs.png) 20px 20px no-repeat;
		background: url(../img/logo-evs-white.svg) 22px 22px no-repeat;
		background-size: 80%;
	}

	section.main {

		clear: both;
		width: 100%;
		display: block;
	}

	aside {

		width: 100%;
		min-height: 60px;
	}

	nav.main ul, .refresh-controls {

		font-size: 150%;
	}

}

@media (max-width: 480px) {

	body {

		font-size: 40%;
	}

	section.main {

		clear: both;
	}

	aside {

		width: 100%;
	}

}

@media (max-width: 979px) {
}

@media (min-width: 980px) {
}

.dashboard {
	border: 1px solid #4d4d4d;
	background: #333;
	margin-top:-6px;
}

.pull-right, .navbar .nav.pull-right{
	margin-right: 10px;
}



.navbar-inner .brand{
	margin-left: 10px;
}

.button-bar{
    margin-top: 30px;
}
